<!DOCTYPE html>
<html>
<head>

    <!-- /.website title -->
    <title>注 册</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    {% load staticfiles %}
    <!-- CSS Files -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen"/>
    <!-- Colors -->
    <link href="{% static "/assets/css/css-index.css" %}" rel="stylesheet" media="screen">
    <link href="https://cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.css" rel="stylesheet">

    <style>
        .has-error .checkbox, .has-error .checkbox-inline, .has-error .control-label, .has-error .help-block, .has-error .radio, .has-error .radio-inline, .has-error.checkbox label, .has-error.checkbox-inline label, .has-error.radio label, .has-error.radio-inline label {
            color: limegreen;
        }
    </style>
</head>

<body data-spy="scroll" data-target="#navbar-scroll">

<div id="preloader" style="background: #fff url({% static "assets/img/loading.GIF" %}) no-repeat center center;"></div>
<div id="top"></div>

<div class="fullscreen landing parallax" style="background-image:url({% static "assets/img/bg.jpg" %}); background-size: 100% 100%; background-repeat: no-repeat">

    <div class="overlay">
        <div class="container">
            <div class="row">
                <div class="col-md-7">

                    <!-- /.logo -->
                    <div class="logo wow fadeInDown"><a href=""><img src="{% static "assets/img/logo.png" %}"
                                                                     alt="logo"></a></div>

                    <!-- /.main title -->
                    <h1 class="wow fadeInLeft">
                        HTTP Runner Manager, Landing Page
                    </h1>

                    <!-- /.header paragraph -->
                    <div class="landing-text wow fadeInUp">
                        <p>Take full reuse of Python's existing powerful libraries: HttpRunner, Celery and Django. And
                            achieve the goal of API automation test, production environment monitoring, and API
                            performance test, with a concise and elegant manner.

                        </p>
                    </div>

                    <!-- /.header button -->
                    <div class="head-btn wow fadeInLeft">
                        <a href="https://github.com/HttpRunner/HttpRunnerManager" class="btn-default">Download</a>
                    </div>


                </div>

                <!-- /.signup form -->
                <div class="col-md-5">

                    <div class="signup-header wow fadeInUp">
                        <h3 class="form-title text-center">GET STARTED</h3>
                        <form class="form-header" role="form" id="register_form">
                            <div class="form-group">
                                <input class="form-control input-lg" name="account" id="account" type="text"
                                       placeholder="Your Account">
                            </div>
                            <div class="form-group">
                                <input class="form-control input-lg" name="email" id="email" type="text"
                                       placeholder="Your Email">
                            </div>
                            <div class="form-group">
                                <input class="form-control input-lg" name="password" id="password" type="password"
                                       placeholder="Password">
                            </div>
                            <div class="form-group">
                                <input class="form-control input-lg" name="repassword" id="repassword" type="password"
                                       placeholder="Repassword">
                            </div>
                            <div class="form-group last">
                                <input type="button" class="btn btn-warning btn-block btn-lg" value="Register"
                                       onclick="register_ajax('#register_form')">
                            </div>
                            <p style="font-size: medium" class="privacy text-center">Do have account? Please <a
                                    href="/api/login/" style="color: darkblue">Login</a>.</p>
                        </form>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.serializeJSON/2.9.0/jquery.serializejson.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="{% static "assets/js/custom.js" %}"></script>
<script src="{% static "assets/js/jquery.sticky.js" %}"></script>
<script src="{% static "assets/js/wow.min.js" %}"></script>
<script src="{% static "assets/js/owl.carousel.min.js" %}"></script>
<script src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>

<script type="text/javascript">
    $(function () {
        $('form').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                account: {
                    message: '用户名验证失败',
                    validators: {
                        stringLength: {
                            min: 3,
                            max: 15,
                            message: '用户名长度必须在3到15位之间'
                        },
                        regexp: {
                            regexp: /^[a-z0-9_-]{3,16}$/,
                            message: '用户名只能包含、小写、数字和下划线'
                        }
                    }
                },
                password: {
                    validators: {
                        stringLength: {
                            min: 6,
                            max: 18,
                            message: '密码长度必须在6到18位之间'
                        },
                        regexp: {
                            regexp: /^[a-z0-9_-]{3,16}$/,
                            message: '密码只能包含、小写、数字和下划线'
                        }
                    }
                },
                repassword: {
                    message: '密码无效',
                    validators: {
                        identical: {//相同
                            field: 'password',
                            message: '两次密码不一致'
                        },
                    }
                },
                email: {
                    validators: {
                        emailAddress: {
                            message: '邮箱地址格式有误'
                        }
                    }
                }
            }
        });
    });

    /*表单信息异步传输*/
    function register_ajax(id) {
        if ($(id).data('bootstrapValidator').isValid()) {
            var data = $(id).serializeJSON();
            var url;
            if (id === "#register_form") {
                url = '/api/register/';
            }
            $.ajax({
                type: 'post',
                url: url,
                data: JSON.stringify(data),
                contentType: "application/json",
                success: function (data) {
                    if (data === '恭喜您，账号已成功注册') {
                        window.location.href = '/api/login/';
                    } else {
                        alert(data);
                    }
                },
                error: function () {
                    alert('Sorry，服务器可能开小差啦, 请重试!')
                }
            });
        }
    }
</script>

</body>
</html>